import { Button, Checkbox, Form, Input, message, Select, Tag } from "antd"
import { useEffect, useState } from "react";
import { Add_Dept, Get_Dept_Post } from "../../service/organization";
const { TextArea } = Input;

export const AddDept = (props) => {
    console.log(props.data)
    // 表单实例
    const [deptForm] = Form.useForm();

    const [deptLv, setDeptLv] = useState("中级");

    const [postOptions, setPostOptions] = useState();

    // 处理新增按钮点击事件
    const handleAdd = async () => {
        try {
            // 验证并获取表单数据
            const formData = await deptForm.validateFields();

            // 组合完整的部门数据（表单数据 + 父级id）
            const deptData = {
                ...formData,
                parentName: props.data.name,
                parentId: props.data.id, // 添加父级id
                lv: deptLv
            };

            const res = await Add_Dept(deptData);
            if (res.code == 0) {
              
                // 如果需要，可以在这里重置表单
                deptForm.resetFields();
                message.info(res.message);
                props.onClose();
            }




        } catch (errorInfo) {
            // 表单验证失败时的处理
            console.log("表单验证失败：", errorInfo);
        }
    };

    useEffect(() => {
        const bindPost = async () => {

            const res = await Get_Dept_Post({ lv: deptLv });
            if (res.code == 0) {

                setPostOptions(res.data.map((d) => ({
                    label: d.name,
                    value: d.id
                })))
            }
        }

        bindPost();
    }, [deptLv])

    const onChange = (value, info) => {
        setDeptLv(info.label);
    };




    return (
        <div className="modal-box">
            <Form
                form={deptForm}
                layout="vertical"
                name="addDeptForm"
            >
                <Form.Item
                    name="deptName"
                    label="部门名称"
                    rules={[{ required: true, message: '请输入部门名称' }]}
                >
                    <Input placeholder="请输入部门名称" />
                </Form.Item>
                <Form.Item
                    name="icon"
                    label="部门图标"
                    rules={[{ required: true, message: '请输入部门图标' }]}
                >
                    <Input placeholder="请输入部门图标" />
                </Form.Item>

                <Form.Item
                    name="parentId"
                    label="上级部门"

                >
                    <Tag color="geekblue">{props.data.name}</Tag>
                </Form.Item>
                <Form.Item
                    name="lv"
                    label="部门等级"

                >
                    <Select
                        defaultValue="中级"
                        showSearch
                        labelInValue
                        placeholder="请选择部门等级"
                        optionFilterProp="label"
                        onChange={onChange}

                        options={[
                            {
                                value: 'gao',
                                label: '高级',
                            },
                            {
                                value: 'zhong',
                                label: '中级',
                            },
                            {
                                value: 'di',
                                label: '低级',
                            },
                        ]}
                    />
                </Form.Item>
                <Form.Item
                    name="post"
                    label="部门岗位"
                    rules={[{ required: true, message: '请输入选择部门岗位' }]}
                >
                    <Checkbox.Group options={postOptions} />
                </Form.Item>

                <Form.Item
                    name="deptDesc"
                    label="部门描述"
                >
                    <TextArea rows={4} placeholder="请输入部门描述（可选）" />
                </Form.Item>
            </Form>

            <Button type="primary" onClick={handleAdd}>
                新增
            </Button>
        </div>
    );
}
